<template>
    <ul>
        <li v-for="(item,index) in newList" :key="index">
            <img :src="item.avatar"/>
            <h5 class="title">{{item.title}}</h5>
            <div>{{item.description}}</div>
            <router-link :to="`/column/${item.id}`">
                <button class="btn btn-outline-primary">进入专栏</button>
            </router-link>
            
        </li>
    </ul>
</template>
<script lang="ts">
import {defineComponent, PropType,computed} from 'vue'
export interface ListType{
    id:number,
    title:string,
    description:string,
    avatar?:string
}
export default defineComponent({
    name:'ColumList',
    props:{
        list:{
            type:Array as PropType<ListType[]>,
            require:true
        }
    },
    setup(props){
        const newList=computed(()=>{
            return props.list?.map(item=>{
                if(!item.avatar){
                    item.avatar=require('@/assets/column.jpg')
                }
                return item
            })
        })
        return {
            newList
        }
    }
})
</script>
<style scoped>
    img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    ul{
        padding-left:0px;
        display: flex;
        margin: 0 0;
        justify-content: center;
    }
    li{
        position: relative;
        width: 300px;
        height: 300px;
        padding: 15px 15px;
        box-sizing: border-box;
        list-style: none;
        display: inline-block;
        margin: 20px 20px;
        text-align: center;
        vertical-align: top;
        border: 1px solid #ccc;
        border-radius:5px
    }
    button{
        margin-top: 20px;
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translate(-50%,0);
    }
    
</style>